import { useState, useEffect } from "react";
import { Form, Popover, Alert, Tooltip, message, Button, Col } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { getLogsPage, getPurchaseorderDetailList } from "../service";
import HeaderTab from "@/components/CommonTab";
import useColumns from "../cloumns/PurchaseOrderDetailCloumns";
import { SimpleTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
const PurchaseOrderDetailModal = ({ visible, checkedRows, recordItem, handleCancel }) => {
	const [form] = Form.useForm();
	const [type, setType] = useState("1");
	const [list, setList] = useState([]);

	const tableRequest = type == 2 ? getLogsPage : getPurchaseorderDetailList;

	const tabArr = [
		{ key: "1", tab: "商品信息" },
		{ key: "2", tab: "采购单日志" }
	];
	const { defaultColumns, defaultColumns1 } = useColumns({});
	const [columns, setColumns] = useState(defaultColumns);
	const [columns1, setColumns1] = useState(defaultColumns1);
	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	const beforeQuerySearch = ({ API_DATA }) => {
		if (type == 2) {
			API_DATA.businessType = "purchase-order-log";
			API_DATA.bizNo = recordItem.purchaseOrderNo;
		} else {
			API_DATA.purchaseOrderNo = recordItem.purchaseOrderNo;
		}
		return { ...API_DATA };
	};
	const tableKey = "PurchaseOrderDetailModal31321";
	const { fetchList, searchSimpleTableProps } = useTableConfig({
		tableKey,
		rowKey: "id",
		columns: type == 2 ? columns1 : columns,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: true,
		beforeQuerySearch,
		resetSourceData: false,
		hasColsSetting: true
	});
	useEffect(() => {
		fetchList();
		if (type == 2) {
			setColumns1(defaultColumns1);
		} else {
			setColumns(defaultColumns);
		}
	}, [type]);

	// tab组件数据
	const HeaderTabProps = {
		type,
		data: tabArr,
		//tab改变
		onChange(val) {
			setType(val);
		}
	};

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal
			title={{ title: "采购单详情" }}
			className="views-table-dialog"
			visible={true}
			onCancel={onCancel}
			width="1132px"
			minHeight="150px"
			footer={
				<Button size="middle" onClick={onCancel}>
					取消
				</Button>
			}
		>
			<HeaderTab {...HeaderTabProps} />
			<div className="views-container">
				<SimpleTable key={tableKey} {...searchSimpleTableProps} />
			</div>
		</CommonModal>
	);
};

export default PurchaseOrderDetailModal;
